<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>童趣玩具店</title>
    <!-- 引入ElementUI的样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        /*
            设置body样式

        */
        body{
            margin: 0px;/*设置上下左右空白距离为0*/
        }
        /*
            设置index-container  div样式
        */
        .index-container{
            margin: 0 auto;/*设置div居中*/
            width: 85%;/*设置宽度,使用百分比设置*/
            min-width: 1024px;/*设置最小宽度*/
        }



        /*
            ElementUI提供的样式
            设置el-header，el-footer两个标签的样式

        */
        .el-header, .el-footer {
            background-color: #606266;
            color: #333;
            line-height: 60px;
        }

        .el-header{
            background-color: lightblue;
            display: flex;
        }

        .el-footer{
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            font-family: 宋体;
            letter-spacing: 3px;
            color: white;

        }

        .el-header .logo{
            border: 0px solid red;
            width: 50%;
            height: 100%;
            padding-left: 50px;
        }

        .logo span{
            margin-top:-30px;
            position: relative;
            top:-17px;
            display: inline-block;
            border: 0px solid red;
            height: 100%;
            line-height: 60px;
            font-size: 30px;
            font-weight: bold;
        }

        .el-header .user_info{
            border: 0px solid blue;
            width: 50%;
            height: 100%;
            text-align: right;
            padding-right: 30px;
        }


        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            overflow: hidden;
        }
        /**
          ElementUI提供的样式
          设置el-main样式
         */
        .el-main {
            /*background-color: #E9EEF3;*/
            color: #333;
            height: 500px;
        }






        a:link{
            text-decoration: none;
            color: dodgerblue;
            font-weight: bold;
        }
        a:visited{
            text-decoration: none;
            color: dodgerblue;
            font-weight: bold;
        }
        a:hover{
            color: red;
            font-weight: bold;
        }







    </style>

</head>
<body>
<div id="index-container" class="index-container">

    <el-container>
        <el-header>
            <div class="logo">
                <img src="/toyshopping/images/logo.png" style="height:60px ">
                <span>童趣玩具店</span>
            </div>
            <div class="user_info" >


                <div class="user_info_div" >
                        <span style="margin-right:10px">
                            <label style="color: red">欢迎您:</label>
                            <label style="color: blue">{{admin.admin_name}}</label>
                        </span>

                    <el-button type="danger" plain size="mini" @click="exit">退出</el-button>
                </div>

            </div>
        </el-header>
        <!--商品信息展示区-->
        <el-container>

            <el-aside width="200px">

                <el-menu

                        class="el-menu-vertical-demo"

                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        @select="selectMenu">


                    <el-menu-item index="/toyshopping/manager/userManager.html">
                        <i class="el-icon-user-solid"></i>
                        <span slot="title">用户管理</span>

                    </el-menu-item>

                    <el-menu-item index="/toyshopping/manager/toyManager.html">
                        <i class="el-icon-shopping-bag-1"></i>
                        <span slot="title">商品管理</span>

                    </el-menu-item>



                    <el-menu-item index="/toyshopping/manager/orderManager.html">
                        <i class="el-icon-s-goods"></i>
                        <span slot="title">订单管理</span>
                    </el-menu-item>
                    <el-menu-item index="/toyshopping/manager/messageManager.html">
                        <i class="el-icon-s-goods"></i>
                        <span slot="title">留言管理</span>
                    </el-menu-item>



                </el-menu>
            </el-aside>

            <el-main>
                <h2 align="center">欢迎进入童趣玩具店——管理系统</h2>
            </el-main>
        </el-container>
        <el-footer>童趣玩具店所有</el-footer>
    </el-container>

</div>

<script src="/toyshopping/js/vue.min.js"></script>
<script src="/toyshopping/js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    /**
     * 创建Vue对象，并对vue进行配置
     * 在vue的构造器中配置
     */
    new Vue({
        //用于配置vue要渲染的元素,在el指定的元素中vue可以起作用,脱离指定元素，vue无效,vue的渲染元素可以为任意元素，一般是div
        el:'#index-container',
        data(){//vue的数据区，等同于java类中的属性
            return{
                admin:null,//当前登录者对象
            }
        },
        methods:{//vue的方法区,在方法区中定义方法，这些方法类似与java中的方法
            /**
             * 获得当前登录者信息
             */
            getCurUser(){
                //从sessionStorage中获得curUser的值，值为一个字符串
                let adminStr = window.sessionStorage.getItem("admin");
                if(adminStr){
                    //将JSON格式的字符串解析为一个JSON对象
                    this.admin = JSON.parse(adminStr);
                    // console.log(this.curUser.user_name);
                }


            },
            /**
             * 退出登录
             */
            exit(){
                //使用ajax向服务端发送退出请求
                axios.delete('/toyshopping/manager/admin/exit')
                    .then(response=>{
                        let result = response.data;
                        if(result.success){
                            //将浏览器的sessionStorage中存储的用户登录信息移除
                            window.sessionStorage.removeItem("admin");//根据key移除对应的属性
                            //使用ElementUI的弹框组件实现
                            this.$message({
                                message: result.message,
                                type: 'success',
                                duration:500,//设置延迟关闭时间(毫秒)
                                onClose:()=>{//当弹框关闭后要执行的函数
                                    location.href="/toyshopping/manager/login.html";
                                }
                            });
                        }
                    })
                    .catch(err=>{
                        alert(err);
                    });
            },

            selectMenu(index){
                location.href=index;
            }


        },
        created(){/*在页面加载后自动执行*/

        },
        mounted(){/*DOM结构在内存中构建前执行*/
            this.getCurUser();//获得当前登录者信息



        }
    });
</script>
</body>
</html>